<template>
	<el-card shadow="never">
		<el-avatar
			icon="el-icon-user-solid"
			:size="120"
			shape="circle"
			fit="fill"
			class="avatar"
			:src="centerStore.avatar"
		></el-avatar>
		<p class="replace">点击更换</p>
		<div class="infoContainer">
			<el-form label-position="left" inline size="normal">
				<el-form-item class="formItem" label="用户名:">
					<el-input
						class="itemContainer"
						v-model="centerStore.nickName"
						maxlength="11"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item class="formItem" label="生日:">
					<el-date-picker
						v-model="centerStore.birthday"
						type="date"
						format="YYYY-MM-DD"
						placeholder="选择日期"
						class="itemContainer"
					/>
				</el-form-item>
				<el-form-item class="formItem" label="性别:">
					<el-button
						type="info"
						class="button buttonLeft"
						:class="{ active: centerStore.gender == '男' }"
						size="default"
						@click="changeSex('男')"
						>男</el-button
					>
					<el-button
						@click="changeSex('女')"
						type="info"
						class="button"
						:class="{ active: centerStore.gender == '女' }"
						size="default"
						>女</el-button
					>
				</el-form-item>
				<el-form-item class="formItem" label="城市:">
					<el-cascader
						v-model="cityValue"
						:options="options"
						@change="handleChange"
					/>
				</el-form-item>
				<el-form-item class="formItem" label="成长等级:">
					<el-tag class="ml-2">lv.{{ centerStore.level }}</el-tag>
				</el-form-item>
				<el-form-item class="formItem" label="技能水平:">
					<el-select
						v-model="centerStore.skill"
						placeholder="Select"
						class="skillContainer"
					>
						<el-option
							v-for="item in centerStore.skills"
							:key="item.id"
							:label="item.data.name"
							:value="item.data.desc"
							v-model="skillId"
							@click="changeId(item)"
						>
							<span
								class="box"
								:class="{
									skillActive:
										centerStore.skillLevel === item.data.id,
								}"
								>{{ item.data.name }}</span
							>
							<span
								style="
									float: right;
									color: #7d8090;
									font-size: 9px;
								"
								>{{ item.data.desc }}</span
							>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="interest" label="兴趣技能:" size="normal">
					<el-tag
						class="interestItem"
						v-for="(item, index) in centerStore.avocation"
						:key="item.id"
						>{{ item.name }}
						<div @click="handler(index)" class="interestDel">X</div>
					</el-tag>

					<el-button
						@click="dialogShow"
						class="interestBtn"
						type="info"
						text
						bg
						>请选择</el-button
					>
				</el-form-item>
			</el-form>
			<el-button type="danger" class="save" @click="save">保存</el-button>
		</div>
		<div class="diaLogBox">
			<el-dialog
				style="height: 700px; width: 1024px"
				v-model="dialogVisible"
			>
				<div class="top" v-show="searchShow">
					<p class="title">
						选择我的兴趣技能 {{ centerStore.avocation.length }}/ 7
					</p>
					<span class="demo">例如舞蹈就选舞种</span>
				</div>
				<div class="returnBtn" v-show="!searchShow">
					<svg
						t="1666277832864"
						class="icon return"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="10174"
						width="32"
						height="32"
					>
						<path
							d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z"
							p-id="10175"
						></path>
					</svg>
					<span @click="searchShow = !searchShow">返回</span>
				</div>
				<div class="form_left_right">
					<!-- form表单 -->
					<el-form :inline="true" class="form-inline">
						<el-form-item>
							<el-input
								v-model="searchValue"
								size="large"
								:prefix-icon="Search"
								placeholder="搜索兴趣技能"
								@input="getSearch"
							/>
						</el-form-item>
						<el-form-item>
							<el-button
								type="default"
								plain
								size="large"
								@click="searchHandler"
								:disabled="!searchValue"
								>搜索
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<SearchBox
					@dialogShow="dialogShow"
					v-show="searchShow"
				></SearchBox>
				<Container
					@changeSearchShow="changeSearchShow"
					v-show="!searchShow"
				></Container>
			</el-dialog>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import SearchBox from '../../components/Dialog/searchBox.vue'
import Container from '../../components/Dialog/container.vue'
import {
	Check,
	Delete,
	Edit,
	Message,
	Search,
	Star,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useUserInfoStore } from '../../store/userInfo'
let centerStore = useUserInfoStore()

// 收集生日
let birthday = ref()
// 弹框显示隐藏
let dialogVisible = ref(false)
// 是否显示弹框中的搜索页
let searchShow = ref(true)
// dialog搜索框的数据
let searchValue = ref()

let arr = centerStore.city.map((item) => {
	return {
		label: item.provinceName,
		children: item.citys?.map((city) => {
			return {
				label: city.cityName,
			}
		}),
	}
})
// 全部城市信息
let options = ref([...arr])
// 自身城市信息
let cityValue = ref()

// 修改个人技能水平
const changeId = (item) => {
	centerStore.skillLevel = item.data.id
}

onMounted(() => {
	// 组件挂载获取用户信息
	centerStore.getSkills()
	centerStore.getAvocation(0)
	// centerStore.getAvocation(1)
})

// 删除技能
let handler = (index) => {
	centerStore.avocation.splice(index, 1)
}

// 修改性别
let changeSex = (type) => {
	centerStore.gender = type
}

// 保存
let save = () => {
	// centerStore.getSaveInfo()
	ElMessage({
		type: 'success',
		message: '修改成功',
	})
	// centerStore.getSkills()
}

// 弹框显示
let dialogShow = () => {
	dialogVisible.value = !dialogVisible.value
}

// 搜索按钮回调
let searchHandler = () => {
	// if (searchShow) {
	// 	searchShow.value = false
	// }
	centerStore.getSearchList(searchValue.value)
}

// 搜索爱好
let getSearch = () => {
	centerStore.getSearchList(searchValue.value)
	searchShow.value = false
}
// 给子组件的方法
let changeSearchShow = () => {
	searchShow.value = true
	searchValue.value = ''
}

//https://www.dance365.com/apis/userCenter/users/ff80808183d5a6440183e9df981b153a?access_token=b274c872-4c0b-476a-9ec4-3a93861296ce

//http://127.0.0.1:8080/apis/userCenter/users/ff80808183d5a6440183e9df981b153a?access_token=b274c872-4c0b-476a-9ec4-3a93861296ce
</script>

<style scoped>
>>> .dialog {
	position: relative;
}

.skillActive {
	color: #f93684;
}

.dialogHeader {
	position: absolute;
	top: 10px;
}
.dialogHeader span {
	font-size: 18px;
	color: #000;
}
.rightSpan {
	padding-left: 20px;
	color: #b1b5c1 !important;
}
>>> .avatar {
	margin-top: 26px;
}

>>> .formItem {
	width: 240px;
	margin-left: 60px;
}
>>> .button {
	height: 30px;
	width: 70px;
	background-color: #f5f7f9;
	color: #7d8090;
	border: none;
}
>>> .buttonLeft {
	margin-left: 40px;
}
>>> .active {
	background-color: #f93684;
	color: #fff;
}
>>> .itemContainer {
	height: 40px;
	width: 160px;
	margin-left: 25px;
}
>>> .skillContainer {
	height: 40px;
	width: 160px;
}
>>> .interest {
	min-width: 510px;
	margin-left: 60px;
}
>>> .save {
	height: 46px;
	width: 140px;
	background: #f93684;
	margin: 20px auto;
	display: block;
}
.interestDel {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: #fe4419;
	position: absolute;
	right: -10px;
	top: -10px;
	text-align: center;
	line-height: 20px;
	color: #fff;
}
>>> .interestItem {
	height: 40px;
	width: 100px;
	line-height: 40px;
	vertical-align: middle;
	/* margin: 0 15px 5px 0; */
	font-size: 14px;
	color: rgb(0, 0, 0);
	background-color: #fff;
	position: relative;
	margin: 0 15px 5px 0;
}
.interestBtn {
	background-color: #f5f7f9;
	color: #bbbfc9;
	border: none;
	height: 30px;
	width: 100px;
	line-height: 30px;
}
.ml-2 {
	background-color: #ff31ac;
	width: 41px;
	height: 20px;
	color: #f5f7f9;
	margin-left: 10px;
}
.avatar:hover {
	box-shadow: 0 0 5px 1px #f93684;
}
.replace {
	color: #7d8090;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
}
.infoContainer {
	box-sizing: border-box;
	min-height: 400px;
	width: 960px;
	padding: 30px 140px;
	margin: 0 auto;
}
.box {
	float: left;
}

.top {
	margin-top: -50px;
	height: 42px;
	margin-bottom: 10px;
}
.title {
	font-size: 18px;
}
.demo {
	color: #b1b5c1;
}

.form_left_right {
	display: flex;
	justify-content: space-between;
}
.form-inline {
	padding-top: 20px;
}
.returnBtn {
	margin-top: -40px;
	height: 24px;
	/* background-color: red; */
	line-height: 24px;
	font-size: 18px;
}
.return {
	width: 16px;
	height: 16px;
}
</style>
